<template>
  <div class="flex">
    <div class="info_box flex">
      <div class="info_l">
        <p>系统类型:</p>
        <p>系统评分:</p>
      </div>
      <div class="info_r">
        <p>{{ data?.type === 1 ? "自定义系统" : "内置系统" }}</p>
        <p>{{ data?.healhScore }}</p>
      </div>
    </div>
    <div class="info_box flex">
      <div class="info_l">
        <p>系统失分:</p>
        <p>关键URL错误数:</p>
      </div>
      <div class="info_r">
        <ga-tooltip>
          <p>{{ data?.lossPointResult.length }}</p>
          <template #content>
            <div v-for="(item, index) in data?.lossPointResult" :key="index">
              {{ item.lossPointStr }}
            </div>
          </template>
        </ga-tooltip>
        <p>{{ data?.errorCount }}</p>
      </div>
    </div>
    <div class="info_box flex">
      <div class="info_l">
        <p>Apdex指数:</p>
      </div>
      <div class="info_r">
        <p>{{ data?.apdex }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, toRefs, onMounted } from "vue";
import { useRoute } from "vue-router";
const props = defineProps({
  data: {
    required: true,
    default: null,
  },
});
const { list } = toRefs(props);
const route = useRoute();
</script>
<style lang="scss" scoped></style>
